<?php if (!empty($this->images)) : ?>
<style type="text/css">
#slideshow {
    position:relative;    
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:98;
}
#slideshow IMG.active {
    z-index:100;
}
#slideshow IMG.last-active {
    z-index:99;
}
</style>
<?php if ($this->slideshow === 1) : ?>
<script type="text/javascript">
function slide()
{
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 250, function() {
            $active.removeClass('active last-active').animate({opacity: 0}, 150);
        });
}
var time = <?php echo $this->time; ?>;
$(function() {
    setInterval( "slide()", time );
});
</script>
<div id="slideshow">
<?php foreach($this->images as $key => $image) : ?>
<?php if ($key == 0) : ?>
    <img width="<?php echo $this->desiredWidth; ?>" src="<?php echo $this->url . '/public/images/' . $this->folder . $this->sourceFolder . $image; ?>" class="active"/>
<?php else: ?>
    <img width="<?php echo $this->desiredWidth; ?>" src="<?php echo $this->url . '/public/images/' . $this->folder . $this->sourceFolder . $image; ?>" style="opacity:0;"/>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php else: ?>
<div id="slideshow">
<?php $key = array_rand($this->images,1); ?>
<img src="<?php echo $this->url . '/public/images/' . $this->folder . $this->sourceFolder . $this->images[$key]; ?>" class="active"/>
</div>
<?php endif; ?>
<?php endif; ?>